<!DOCTYPE html>
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<link rel="stylesheet" href="./elementui/element.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="./elementui/element.js"></script>
<link href="lib/toolbarConfig.css" rel="stylesheet" type="text/css">
<script src="lib/toolbarConfig.min.js"></script>

<style>
  @font-face {
    font-family: "iconfont";
    src:
      url('iconfont/iconfont.woff?t=1611889426687') format('woff'),
      url('iconfont/iconfont.ttf?t=1611889426687') format('truetype'),
      url('iconfont/iconfont.svg?t=1611889426687#iconfont') format('svg');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icbiaoji_biaojiguanli:before {
    content: "\e9e3";
  }

  .icci_qitagongju:before {
    content: "\e9dc";
  }

  .icic_biaoji:before {
    content: "\e9dd";
  }

  .icchaxun_chaxun-288:before {
    content: "\e9de";
  }

  .icgongj_gongjutiaohengshou:before {
    content: "\e9df";
  }

  .icgongj_gongjutiaoshushou:before {
    content: "\e9e0";
  }

  .icgongj_gongjutiaohengzhan:before {
    content: "\e9e1";
  }

  .icgongj_gongjutiaoshuzhan:before {
    content: "\e9e2";
  }

  .ic2020tubiao_chakanxiangqing_kuaijie:before {
    content: "\e9db";
  }

  .ic2020tubiao_quanjing2:before {
    content: "\e9d9";
  }

  .ic2020tubiao_quanjing1:before {
    content: "\e9da";
  }

  .ic2020tubiao_guanbi1:before {
    content: "\ea3d";
  }

  .ic2020tubiao_dandian_xuanzhong1:before {
    content: "\ea3e";
  }

  .ic2020tubiao_paixu1:before {
    content: "\ea3f";
  }

  .ic2020tubiao_dandian1:before {
    content: "\ea40";
  }

  .ic2020tubiao_fuxuankuang_banxuan1:before {
    content: "\ea41";
  }

  .ic2020tubiao_fuxuankuang_quanzhong-quanxuan1:before {
    content: "\ea42";
  }

  .ic2020tubiao_xia-2621:before {
    content: "\ea43";
  }

  .ic2020tubiao_you-2641:before {
    content: "\ea44";
  }

  .ic2020tubiao_shang-2611:before {
    content: "\ea45";
  }

  .ic2020tubiao_fuxuankuang1:before {
    content: "\ea46";
  }

  .ic2020tubiao_shang-2741:before {
    content: "\ea47";
  }

  .ic2020tubiao_xia-2731:before {
    content: "\ea48";
  }

  .ic2020tubiao_xia-2671:before {
    content: "\ea49";
  }

  .ic2020tubiao_you-2691:before {
    content: "\ea4a";
  }

  .ic2020tubiao_shang-2681:before {
    content: "\ea4b";
  }

  .ic2020tubiao_you-2721:before {
    content: "\ea4c";
  }

  .ic2020tubiao_zuo-2711:before {
    content: "\ea4d";
  }

  .ic2020tubiao_zuo-2701:before {
    content: "\ea4e";
  }

  .ic2020tubiao_zuo-2631:before {
    content: "\ea4f";
  }

  .icchexiao:before {
    content: "\e9e6";
  }

  .icfanhui:before {
    content: "\e9e9";
  }

  .icgengduo:before {
    content: "\e9f3";
  }

  .icpifu:before {
    content: "\e9fa";
  }

  .icshoucang1:before {
    content: "\ea08";
  }

  .icshoucang2:before {
    content: "\ea09";
  }

  .icshanchu:before {
    content: "\ea0e";
  }

  .icshuaxin:before {
    content: "\ea10";
  }

  .icxiangqing:before {
    content: "\ea15";
  }

  .ic2020tubiao_tiediceliang-92:before {
    content: "\e9d7";
  }

  .ic2020tubiao_tiediceliang-91:before {
    content: "\e9d8";
  }

  .ic2020tubiao_chakanxiangqing:before {
    content: "\e9d5";
  }

  .ic2020tubiao_gengduo4:before {
    content: "\e9d6";
  }

  .ic2020tubiao_gongjutiaozheng:before {
    content: "\e9d4";
  }

  .ic2020tubiao_shengmingzhouqi:before {
    content: "\e9d3";
  }

  .ic2020tubiao_ditubianji:before {
    content: "\e9c4";
  }

  .ic2020tubiao_fangda-116:before {
    content: "\e9c5";
  }

  .ic2020tubiao_dashujufenxi-118:before {
    content: "\e9c6";
  }

  .ic2020tubiao_gaodu:before {
    content: "\e9c7";
  }

  .ic2020tubiao_gengduo-93:before {
    content: "\e9c8";
  }

  .ic2020tubiao_shangxiajuanlian:before {
    content: "\e9c9";
  }

  .ic2020tubiao_tongjifenxi-100:before {
    content: "\e9ca";
  }

  .ic2020tubiao_zuoyoujuanlian:before {
    content: "\e9cb";
  }

  .ic2020tubiao_suoxiao-117:before {
    content: "\e9cc";
  }

  .ic2020tubiao_zuidahua:before {
    content: "\e9cd";
  }

  .ic2020tubiao_shujuguanli:before {
    content: "\e9ce";
  }

  .ic2020tubiao_zuixiaohua:before {
    content: "\e9cf";
  }

  .ic2020tubiao_tupiancaiji:before {
    content: "\e9d0";
  }

  .ic2020tubiao_zuobiaoceliang:before {
    content: "\e9d1";
  }

  .ic2020tubiao_zuobiaochaxun-98:before {
    content: "\e9d2";
  }

  .icsvg_shujujicheng_xianbiaoji:before {
    content: "\e9ac";
  }

  .icsvg_shujujicheng_xiazai1:before {
    content: "\e9ad";
  }

  .icsvg_shujujicheng_xuanzhibiaoji:before {
    content: "\e9ae";
  }

  .icsvg_shujujicheng_xianguanlian:before {
    content: "\e9af";
  }

  .icsvg_shujujicheng_wenzibiaoji1:before {
    content: "\e9b0";
  }

  .icsvg_shujujicheng_xiandingwei:before {
    content: "\e9b1";
  }

  .icsvg_shujujicheng_xiaoxi:before {
    content: "\e9b2";
  }

  .icsvg_shujujicheng_xianshi:before {
    content: "\e9b3";
  }

  .icsvg_shujujicheng_yincang-681:before {
    content: "\e9b4";
  }

  .icsvg_shujujicheng_yichu:before {
    content: "\e9b5";
  }

  .icsvg_shujujicheng_zhuanti:before {
    content: "\e9b6";
  }

  .icsvg_shujujicheng_zhoubianchaxun:before {
    content: "\e9b7";
  }

  .icsvg_shujujicheng_yuanxingbiaoji:before {
    content: "\e9b8";
  }

  .icsvg_shujujicheng_yincang-67:before {
    content: "\e9b9";
  }

  .icsvg_shujujicheng_xian:before {
    content: "\e9ba";
  }

  .icsvg_shujujicheng-73:before {
    content: "\e9bb";
  }

  .icsvg_shujujicheng_zuobiaochaxun:before {
    content: "\e9bc";
  }

  .icsvg_shujujicheng_zongduanmian:before {
    content: "\e9bd";
  }

  .icsvg_shujujicheng-33:before {
    content: "\e9be";
  }

  .icsvg_shujujicheng_zongduanmianfenxi:before {
    content: "\e9bf";
  }

  .icsvg_shujujicheng_zhuantizhizuo:before {
    content: "\e9c0";
  }

  .icsvg_shujujicheng_zhuantiyangshi:before {
    content: "\e9c1";
  }

  .icsvg_shujujicheng-74:before {
    content: "\e9c2";
  }

  .icsvg_shujujicheng-79:before {
    content: "\e9c3";
  }

  .icsvg_shujujicheng_hengduanmianfenxi:before {
    content: "\e984";
  }

  .icsvg_shujujicheng_jiejing:before {
    content: "\e985";
  }

  .icsvg_shujujicheng_heguifenxi:before {
    content: "\e986";
  }

  .icsvg_shujujicheng_lakuang:before {
    content: "\e987";
  }

  .icsvg_shujujicheng_jiance:before {
    content: "\e988";
  }

  .icsvg_shujujicheng_mianbiaoji:before {
    content: "\e989";
  }

  .icsvg_shujujicheng_mianji:before {
    content: "\e98a";
  }

  .icsvg_shujujicheng_mian1:before {
    content: "\e98b";
  }

  .icsvg_shujujicheng_lakuangchaxun:before {
    content: "\e98c";
  }

  .icsvg_shujujicheng_hengduanmian:before {
    content: "\e98d";
  }

  .icsvg_shujujicheng_mianguanlian:before {
    content: "\e98e";
  }

  .icsvg_shujujicheng_moxing:before {
    content: "\e98f";
  }

  .icsvg_shujujicheng_jiaoduchaxun:before {
    content: "\e990";
  }

  .icsvg_shujujicheng_qumianbiaoji:before {
    content: "\e991";
  }

  .icsvg_shujujicheng_lujingfenxi:before {
    content: "\e992";
  }

  .icsvg_shujujicheng_quyu:before {
    content: "\e993";
  }

  .icsvg_shujujicheng_qingchu:before {
    content: "\e994";
  }

  .icsvg_shujujicheng_shoucang:before {
    content: "\e995";
  }

  .icsvg_shujujicheng_huanchongquyu:before {
    content: "\e996";
  }

  .icsvg_shujujicheng_juanlian:before {
    content: "\e997";
  }

  .icsvg_shujujicheng_shangchuan:before {
    content: "\e998";
  }

  .icsvg_shujujicheng_tianjia:before {
    content: "\e999";
  }

  .icsvg_shujujicheng_pingyi:before {
    content: "\e99a";
  }

  .icsvg_shujujicheng_juliceliang:before {
    content: "\e99b";
  }

  .icsvg_shujujicheng_tuli-01:before {
    content: "\e99c";
  }

  .icsvg_shujujicheng_wenzibiaoji:before {
    content: "\e99d";
  }

  .icsvg_shujujicheng_suoxiao:before {
    content: "\e99e";
  }

  .icsvg_shujujicheng_tupian:before {
    content: "\e99f";
  }

  .icsvg_shujujicheng_toumingdu:before {
    content: "\e9a0";
  }

  .icsvg_shujujicheng_tongjifenxi:before {
    content: "\e9a1";
  }

  .icsvg_shujujicheng_tupianshangchuan:before {
    content: "\e9a2";
  }

  .icsvg_shujujicheng_sipingduibi:before {
    content: "\e9a3";
  }

  .icsvg_shujujicheng_shuangpingduibi:before {
    content: "\e9a4";
  }

  .icsvg_shujujicheng_quxianbiaoji:before {
    content: "\e9a5";
  }

  .icsvg_shujujicheng_shangchuan2:before {
    content: "\e9a6";
  }

  .icsvg_shujujicheng_mianjiceliang:before {
    content: "\e9a7";
  }

  .icsvg_shujujicheng_tuli-78:before {
    content: "\e9a8";
  }

  .icsvg_shujujicheng_tianjiatubiaodingwei:before {
    content: "\e9a9";
  }

  .icsvg_shujujicheng_xiazai:before {
    content: "\e9aa";
  }

  .icsvg_shujujicheng_lakuangxiazai:before {
    content: "\e9ab";
  }

  .icsvg_shujujicheng_mian:before {
    content: "\e966";
  }

  .icsvg_shujujicheng_yincang-68:before {
    content: "\e96a";
  }

  .icsvg_shujujicheng_dayin:before {
    content: "\e971";
  }

  .icsvg_shujujicheng_dangedingwei:before {
    content: "\e972";
  }

  .icsvg_shujujicheng_duobianxingchaxun-16:before {
    content: "\e973";
  }

  .icsvg_shujujicheng_dingweichaxun:before {
    content: "\e974";
  }

  .icsvg_shujujicheng_dianguanlian:before {
    content: "\e975";
  }

  .icsvg_shujujicheng_chaxun:before {
    content: "\e976";
  }

  .icsvg_shujujicheng_gerenzhongxin:before {
    content: "\e977";
  }

  .icsvg_shujujicheng_CADhuizhi:before {
    content: "\e978";
  }

  .icsvg_shujujicheng_duobianxingxiazai:before {
    content: "\e979";
  }

  .icsvg_shujujicheng_dandianchaxunguangbiao:before {
    content: "\e97a";
  }

  .icsvg_shujujicheng_fangda:before {
    content: "\e97b";
  }

  .icsvg_shujujicheng_guiji:before {
    content: "\e97c";
  }

  .icsvg_shujujicheng_dingdiandingwei:before {
    content: "\e97d";
  }

  .icsvg_shujujicheng_duobianxingchaxun-19:before {
    content: "\e97e";
  }

  .icsvg_shujujicheng_guihuaxuanzhi:before {
    content: "\e97f";
  }

  .icsvg_shujujicheng_dian:before {
    content: "\e980";
  }

  .icsvg_shujujicheng_gongjuxiang:before {
    content: "\e981";
  }

  .icsvg_shujujicheng_celiang:before {
    content: "\e982";
  }

  .icsvg_shujujicheng_duibifenxi:before {
    content: "\e983";
  }

  .icsvg_shujujicheng_celianggongju:before {
    content: "\e96b";
  }

  .icsvg_shujujicheng_bangzhu:before {
    content: "\e96c";
  }

  .icsvg_shujujicheng_baocun:before {
    content: "\e96d";
  }

  .icsvg_shujujicheng_biaozhu:before {
    content: "\e96e";
  }

  .icsvg_shujujicheng_dashujufenxi:before {
    content: "\e96f";
  }

  .icsvg_shujujicheng_chuantouchaxun:before {
    content: "\e970";
  }
</style>

<body>
  <div class="mdiv" style="width: 935px; height: 500px; position: relative;">
    <div id="test">
    </div>
  </div>
  <script>
    html = new Vue(toolbarConfig)
    html.$mount(document.getElementById('test'))
    var config = {
      "fastBut": [
        {
          "label": "快捷",
          "id": "cjgj",
          "iconCode": "&#xe9db;",
          "index": 0,
          "subItems": [{
            "label": "放大",
            "iconCode": "&#xe97b;",
            "id": "zoomIn"
          }, {
            "label": "缩小",
            "iconCode": "&#xe99e;",
            "id": "zoomOut"
          }, {
            "label": "全景",
            "iconCode": "&#xe9d9;",
            "id": "panoramic"
          }, {
            "label": "清除",
            "iconCode": "&#xe994;",
            "id": "clare"
          }]
        },
        {
          "label": "放大",
          "iconCode": "&#xe97b;",
          "id": "zoomIn"
        },
        {
          "label": "缩小",
          "iconCode": "&#xe99e;",
          "id": "zoomOut"
        },
        {
          "label": "全景",
          "iconCode": "&#xe9d9;",
          "id": "panoramic"
        },
        {
          "label": "清除",
          "iconCode": "&#xe994;",
          "id": "clare"
        },
        {
          "label": "图层控制",
          "iconCode": "&#xe99c;",
          "id": "gmap.vue.LayerControlWidget",
          "type": "widget"
        },
        {
          "label": "工具",
          "iconCode": "&#xe981;",
          "id": "gmap.vue.ToolboxWidget",
          "type": "widget",
          "lock": true
        }
      ],
      "hideTitle": true,
      "saveUrl": "myselfConfig/saveUserToolbar"
    }
    var boxConfig = [{
      "label": "测量工具",
      "id": "clgj",
      "iconCode": "&#xe96b;",
      "index": "0",
      "subItems": [{
        "label": "测量",
        "iconCode": "&#xe96b;",
        "id": "gmap.vue.MeasureWidget",
        "type": "widget"
      }, {
        "label": "图层控制",
        "iconCode": "&#xe99c;",
        "id": "gmap.vue.LayerControlWidget",
        "type": "widget"
      }]
    }, {
      "label": "查询",
      "id": "cx",
      "iconCode": "&#xe976;",
      "index": "0",
      "subItems": [{
        "label": "单点查询",
        "iconCode": "&#xe970;",
        "id": "drawPointQuery",
        "type": "continuous"
      }, {
        "label": "拉框查询",
        "iconCode": "&#xe98c;",
        "id": "drawRectQuery",
        "type": ""
      }, {
        "label": "绘面查询",
        "iconCode": "&#xe98c;",
        "id": "drawPolygonQuery",
        "type": ""
      }]
    }, {
      "label": "快捷",
      "id": "cjgj",
      "iconCode": "&#xe9db;",
      "index": 0,
      "subItems": [{
        "label": "放大",
        "iconCode": "&#xe97b;",
        "id": "zoomIn"
      }, {
        "label": "缩小",
        "iconCode": "&#xe99e;",
        "id": "zoomOut"
      }, {
        "label": "全景",
        "iconCode": "&#xe9d9;",
        "id": "panoramic"
      }, {
        "label": "清除",
        "iconCode": "&#xe994;",
        "id": "clare"
      }]
    }]
    html.setConfig(config)
    html.setWidget(boxConfig)
  </script>
</body>